<template>
    <el-dialog class="editor-dialog" :title="title" width="55%" :visible="visible"
               append-to-body @close="handleClose" @closed="$emit('input', false)">

        <monaco-editor v-model="text" :lang="lang"></monaco-editor>

        <div slot="footer">
            <el-button :loading="saveLoading" @click="handleClose">取 消</el-button>
            <el-button type="success" :loading="saveLoading" @click="saveClick">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
  import MonacoEditor from "../editor/MonacoEditor/index";

  /**
   * @author 白雨浓
   * @date 2019/7/7 16:35
   *
   * 编辑器 窗口
   **/
  export default {
    name: 'EditorDialog',
    components: {MonacoEditor},
    props: ['value', 'title', 'lang', 'initText'],
    data() {
      return {
        visible: this.value,
        saveLoading: false,
        text: this.initText,
      }
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {
      async saveClick() {
        this.$emit('submit', this.text);
      },
      handleClose() {
        this.visible = false;
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .editor-dialog {
    }
</style>
